﻿@{
    ViewBag.Title = "设置图标字体";
    var F = Html.F();
}

@using System.Text;


@section head {
    <style type="text/css">
        ul.icons{list-style-type:none;padding:0;margin:0;}ul.icons li{display:inline-block;margin:0 10px 10px 0;text-align:center;border-style:solid;border-width:1px;padding:10px 5px;width:150px;}ul.icons li .f-icon{font-size:28px;height:28px;line-height:28px;min-width:30px;text-align:center;}ul.icons li .title{margin-top:10px;}ul.icons li .subtitle{margin-top:5px;}.mysearch{text-align:left;}.mysearch .f-field-textbox{height:46px;font-size:24px;line-height:28px;padding:8px 12px;}
    </style>
}

@section body {

    <div class="mysearch">
        @(F.TextBox().Width(350).EmptyText("搜索图标").ShowLabel(false).ID("tbxSearch").Listener("change", "onSearchBoxChange"))
    </div>
    <br />

    @{
        string LI_TEMPLATE = "<li class=\"f-state-default\"><i class=\"f-icon f-iconfont {0}\"></i><div class=\"title\">{1}</div><div class=\"subtitle\">{2}</div></li>";

        StringBuilder sb = new StringBuilder();

        string iconName = String.Empty;

        sb.Append("<ul class=\"icons\">");
        sb.AppendFormat(LI_TEMPLATE, "", "None", "&nbsp;");
        foreach (string icon in Enum.GetNames(typeof(IconFont)))
        {
            // 以下划线开头的是IconFont字体
            if (!icon.StartsWith("_"))
            {
                continue;
            }

            IconFont iconType = (IconFont)Enum.Parse(typeof(IconFont), icon);

            iconName = IconFontHelper.GetName(iconType);

            var shortIconName = iconName;
            if (shortIconName.StartsWith("f-iconfont-"))
            {
                shortIconName = shortIconName.Substring("f-iconfont-".Length);
            }

            sb.AppendFormat(LI_TEMPLATE, iconName, icon, shortIconName);

        }
        sb.Append("</ul>");
    }

    @Html.Raw(sb.ToString())

}

@section script {
    <script>
        var id = '@ViewBag.id';

        function onSearchBoxChange(event) {
            var keyword = this.getValue().toLowerCase();

            $('ul.icons li').each(function () {
                var cnode = $(this), title = cnode.find('.title').text().toLowerCase();

                if (title.indexOf(keyword) >= 0) {
                    cnode.show();
                } else {
                    cnode.hide();
                }
            });
        }


        F.ready(function () {
            $('ul.icons li').hover(function() {
                    $(this).addClass('f-state-hover');
                },
                function() {
                    $(this).removeClass('f-state-hover');
                });

                $('li.f-state-default').click(function () {
                    var v = $(this).find('.title').text();
                    F.doPostBack('@Url.Action("UpdateIconFonts")', { id: id, font:v })
                });
        });

    </script>

}
